<template>
    <!-- 出库总览 -->
    <div class="platform-home">
        <!-- 头部 -->
        <div class="platform-home-header flex_bw_center margin-bottom-10">
            <div class="platform-home-header-left ">
                <div class="platform-home-header-left-title flex_center_center">
                    <span class="margin-right-10">你好,{{userName}}</span>

                    <div class="platform-home-header-left-title-time">
                        <el-select v-model="value" style="width: 100px">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="platform-home-header-right">
                            {{ "今天是" + new Date().toLocaleDateString() + "，本周的第" + new Date().getDay() + "天" }}
            </div>
        </div>
        <!-- 内容 -->
        <div class="platform-home-content ">
            <div class="platform-home-content-top margin-bottom-20">
                <div class="dashboard-grid">
                    <div class="dashboard-card" v-for="item in dashboardData" :key="item.title" v-animate-on-scroll>
                        <div class="card-header">
                            <span class="card-title">{{ item.title }}</span>
                            <span class="card-icon">
                                <!-- 图标占位 -->
                                <span class="icon-placeholder"></span>
                            </span>
                        </div>
                        <div class="card-main">
                            <span class="card-value">
                                <count-to :start-val="0" :end-val="parseFloat(item.value.toString().replace(/,/g, ''))"
                                    :duration="2000" :decimal="item.title.includes('金额') ? 2 : 0"
                                    :separator="item.title.includes('金额') ? ',' : ''" :autoplay="true" />
                            </span>
                            <span class="card-change" :class="item.change > 0 ? 'up' : item.change < 0 ? 'down' : ''"
                                v-if="item.unit">
                                {{ item.change > 0 ? '+' : '' }}{{ item.change }}{{ item.unit }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="platform-home-content-center  ">
                <!-- 左边销售业绩图 -->

                <div class="platform-home-content-center-left ">
                    <div id="sales-bar-chart" class="sales-bar-chart"></div>
                </div>

                <!-- 右边业绩达成率饼状图 -->
                <div class="platform-home-content-bottom-item1">
                    <div>
                        <div class="chart-title">业绩达成率</div>
                        <div style="height: 150px;" id="completion-rate-chart" class=""></div>
                        <div class="chart-info flex_bw_center">
                            <div class="chart-info-item">
                                <div class="info-label">销售目标 (元)</div>
                                <div class="info-value">350,000</div>
                            </div>
                            <div class="chart-info-item">
                                <div class="info-label">回款金额 (元)</div>
                                <div class="info-value">300,000</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="platform-home-content-bottom flex_bw_center">

                <div class="platform-home-content-bottom-item">
                    <div class="">
                        <div class="chart-title">销售商品分类占比</div>
                        <div id="product-category-chart" class="chart-container"></div>
                        <div class="chart-legend-box">
                            <div class="legend-item">
                                <span class="legend-dot" style="background-color: #3B82F6;"></span>
                                <span class="legend-label">电器</span>
                                <span class="legend-value">38200.00</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-dot" style="background-color: #FBBF24;"></span>
                                <span class="legend-label">服饰鞋类</span>
                                <span class="legend-value">12000.00</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-dot" style="background-color: #10B981;"></span>
                                <span class="legend-label">生活用品</span>
                                <span class="legend-value">54020.00</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-dot" style="background-color: #F87171;"></span>
                                <span class="legend-label">美妆护肤</span>
                                <span class="legend-value">34000.00</span>
                            </div>
                            <div class="legend-item">
                                <span class="legend-dot" style="background-color: #3B82F6;"></span>
                                <span class="legend-label">食品</span>
                                <span class="legend-value">82000.00</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="platform-home-content-bottom-item">
                    <div>
                        <div class="sales-ranking-header">
                            <div class="chart-title">销售业绩排行榜</div>
                        </div>
                        <div class="sales-ranking-columns">
                            <div class="column-name">姓名</div>
                            <div class="column-sales">销售金额（元）</div>
                            <div class="column-repayment">回款金额（元）</div>
                        </div>
                        <div class="ranking-content">
                            <swiper :modules="modules" :direction="'vertical'" :slides-per-view="5" :space-between="0"
                                :mousewheel="true"
                                :autoplay="todoList.length > 5 ? { delay: 1500, disableOnInteraction: false } : false"
                                :loop="todoList.length > 5" class="ranking-swiper">
                                <swiper-slide v-for="(item, index) in todoList" :key="index" class="ranking-item">
                                    <div class="ranking-left">
                                        <div class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
                                        <span class="rank-name">{{ item.title }}</span>
                                    </div>
                                    <div class="ranking-right">
                                        <div class="sales-amount">{{ item.Sales }}</div>
                                        <div class="repayment-amount">{{ item.Repayment }}</div>
                                    </div>
                                </swiper-slide>
                            </swiper>
                        </div>
                    </div>
                </div>


                <div class="platform-home-content-bottom-item2">
                    <div>
                        <div class="chart-title">利润占比</div>
                        <div id="profit-chart" class="chart-container1"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Mousewheel } from 'swiper/modules';
import 'swiper/css';
import { ref, onMounted, nextTick, defineComponent } from "vue";
import api from "@/api/index.js";
import { ElMessage } from "element-plus";
import * as echarts from 'echarts'
import CountTo from '../home/components/CountTo.vue'; // 引入数字动画组件

const value = ref<string>('')

interface options {
    value: string,
    label: string,
}
const options: options[] = [
    {
        value: 'year',
        label: '本年',

    },
    {
        value: 'month',
        label: '本月',
    },
    {
        value: 'week',
        label: '本周',
    },
    {
        value: 'day',
        label: '本日',
    }
]

const dashboardData = [
    { title: '新增客户（人）', value: 42, change: 0, unit: '' },
    { title: '新增销售（单）', value: 128, change: 4.2, unit: '%' },
    { title: '销售金额（元）', value: 300000, change: -1.8, unit: '%' },
    { title: '销售退货（单）', value: 8, change: -1.2, unit: '%' },
    { title: '销售退货金额（元）', value: 9800, change: 1.5, unit: '%' },
]

// 待办事项数据
const todoList = ref([
    { title: '王希瑞', Sales: '100000', Repayment: '100000' },
    { title: '李欢', Sales: '100000', Repayment: '100000' },
    { title: '曲婷婷', Sales: '100000', Repayment: '100000' },
    { title: '马升', Sales: '100000', Repayment: '100000' },
    { title: '杨万里', Sales: '100000', Repayment: '100000' },
    { title: '胡长安', Sales: '100000', Repayment: '100000' },
    { title: '陈建', Sales: '100000', Repayment: '100000' }
]);

// 分类数据
const categoryData = ref([
    { name: '电器', value: 38200.00, color: '#3B82F6', percent: '34%' },
    { name: '服饰鞋类', value: 12000.00, color: '#FBBF24', percent: '11%' },
    { name: '生活用品', value: 54020.00, color: '#10B981', percent: '24%' },
    { name: '美妆护肤', value: 34000.00, color: '#F87171', percent: '15%' },
    { name: '食品', value: 82000.00, color: '#3B82F6', percent: '16%' }
]);

// 采购分类数据
const purchaseCategoryData = ref([
    { name: '电器', value: 12200.00, color: '#818CF8', percent: '15%' },
    { name: '服饰鞋类', value: 24000.00, color: '#FBBF24', percent: '30%' },
    { name: '生活用品', value: 21020.00, color: '#34D399', percent: '25%' },
    { name: '美妆护肤', value: 18900.00, color: '#F87171', percent: '20%' },
    { name: '食品', value: 42000.00, color: '#3B82F6', percent: '10%' }
]);

// 供应商数据
const supplierData = ref([
    { name: '供应商一', value: 18234.96 },
    { name: '供应商二', value: 18234.96 },
    { name: '供应商三', value: 18234.96 },
    { name: '供应商四', value: 18234.96 },
    { name: '供应商五', value: 18234.96 },
    { name: '其他', value: 18234.96 }
]);

// 自定义指令：元素进入视口时添加动画
const vAnimateOnScroll = {
    mounted: (el) => {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    el.classList.add('animate-in');
                    observer.unobserve(el);
                }
            });
        }, { threshold: 0.1 });

        observer.observe(el);
    }
};

// 初始化销售业绩图表
const initSalesChart = () => {
    nextTick(() => {
        const chartDom = document.getElementById('sales-bar-chart');
        if (chartDom) {
            const myChart = echarts.init(chartDom);

            const option = {
                title: {
                    text: '销售业绩图',//标题
                    left: '10',//标题位置
                    top: '4',//标题位置
                    textStyle: {
                        fontSize: 16,//标题字体大小
                        fontWeight: 700,//标题字体粗细
                        color: '#000'//标题字体颜色
                    }
                },
                grid: {
                    left: '3%',//网格左侧位置
                    right: '1%',//网格右侧位置
                    top: 65,//网格顶部位置
                    bottom: 10,//网格底部位置
                    containLabel: true//是否包含标签
                },
                tooltip: {
                    trigger: 'axis',//提示框类型
                    backgroundColor: '#fff',//提示框背景颜色
                    borderColor: '#eee',//提示框边框颜色
                    borderWidth: 1,//提示框边框宽度
                    textStyle: { color: '#333' },//提示框字体颜色
                    extraCssText: 'box-shadow:0 2px 8px rgba(0,0,0,0.08);'//提示框阴影
                },
                legend: {
                    data: ['销售收入', '目标业绩'],//图例数据
                    right: 500,//图例右侧位置
                    top: 15,//图例顶部位置
                    itemWidth: 18,//图例宽度
                    itemHeight: 10,//图例高度
                    textStyle: { color: '#666', fontSize: 14 }//图例字体颜色
                },
                xAxis: {
                    type: 'category',//x轴类型
                    data: Array.from({ length: 29 }, (_, i) => (i + 1).toString().padStart(2)),//x轴数据
                    axisLine: { lineStyle: { color: '#e5e6eb' } },//x轴线样式
                    axisTick: { show: false },//x轴刻度线
                    axisLabel: { color: '#888', fontSize: 13 }//x轴标签
                },
                yAxis: {
                    name: '单位/元',//y轴名称
                    type: 'value',//y轴类型
                    nameTextStyle: {
                        align: 'right',//设置名称对齐方式
                        color: '#86909C', // 设置颜色为红色
                        fontSize: 12 // 可选，设置字体大小
                    },
                    splitLine: { lineStyle: { color: '#f0f0f0' } },//y轴分割线样式
                    axisLabel: { color: '#888', fontSize: 13 }//y轴标签
                },
                series: [
                    {
                        name: '销售收入',//销售收入名称
                        type: 'bar',//柱状图
                        data: [1300, 2400, 1900, 4600, 2500, 6000, 7000, 3000, 8000, 5000, 4060, 3500, 2700, 2600, 2900, 5600, 3200, 2500, 3100, 2800, 3300, 3600, 4000, 3700, 4200, 4800, 3900, 3400, 3200],//销售收入数据
                        barWidth: 18, // 柱子宽度
                        itemStyle: {
                            color: '#6860FF', // 柱子颜色
                            borderRadius: [3, 3, 0, 0], // 柱子圆角
                            borderColor: 'rgba(84,112,198,0.15)', // 柱子边框颜色
                            borderWidth: 4 // 柱子边框宽度
                        }
                    },
                    {
                        name: '目标业绩',
                        type: 'bar',
                        data: Array(29).fill(10000),//目标业绩数据
                        barWidth: 18,//目标业绩宽度
                        itemStyle: {
                            color: 'rgba(84,112,198,0.15)',//目标业绩颜色
                            borderRadius: [6, 6, 0, 0],//目标业绩圆角

                        },
                        barGap: '-100%',//目标业绩与销售业绩之间的间距
                        z: 0
                    }
                ]
            };

            myChart.setOption(option);//设置图表选项
            window.addEventListener('resize', () => myChart.resize());//监听窗口大小变化
        }
    });
};

// 初始化业绩达成率图表
const initCompletionRateChart = () => {
    nextTick(() => {
        const chartDom = document.getElementById('completion-rate-chart');
        if (chartDom) {
            const myChart = echarts.init(chartDom);

            const option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 100,
                        endAngle: -270,
                        radius: '100%',
                        pointer: {
                            show: false
                        },
                        progress: {
                            show: true,
                            overlap: false,
                            roundCap: true,
                            clip: false,
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#6366F1' },
                                        { offset: 1, color: '#818CF8' }
                                    ]
                                },
                                shadowColor: 'rgba(99, 102, 241, 0.2)',
                                shadowBlur: 20
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                width: 15,
                                color: [
                                    [1, '#EBEDF5']
                                ]
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        data: [
                            {
                                value: 90,
                                name: '完成率',
                                title: {
                                    offsetCenter: ['0%', '-20%']
                                },
                                detail: {
                                    offsetCenter: ['0%', '14%']
                                }
                            }
                        ],
                        detail: {

                            fontSize: 20,
                            fontWeight: 'bold',
                            color: '#333',
                            formatter: '{value}%',
                            show: true,
                            valueAnimation: true
                        }
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }
    });
};

// 初始化销售商品分类占比图表
const initProductCategoryChart = () => {
    nextTick(() => {
        const chartDom = document.getElementById('product-category-chart');
        if (chartDom) {
            const myChart = echarts.init(chartDom);

            const option = {
                tooltip: {
                    trigger: 'item',//提示框类型
                    formatter: '{b}: {c} ({d}%)',//提示框格式化
                    backgroundColor: '#fff',//提示框背景颜色
                    borderColor: '#eee',//提示框边框颜色
                    borderWidth: 1,//提示框边框宽度
                    textStyle: { color: '#333' },//提示框字体颜色
                    extraCssText: 'box-shadow:0 2px 8px rgba(0,0,0,0.08);'
                },
                legend: {
                    show: false//图例是否显示
                },
                series: [
                    {
                        name: '销售分类',//图例名称
                        type: 'pie',//图表类型
                        roseType: 'radius',//玫瑰图类型
                        center: ['50%', '50%'],//图表中心位置
                        radius: ['0%', '100%'],//图表半径
                        avoidLabelOverlap: true,//是否避免标签重叠
                        itemStyle: {
                            borderColor: '#fff',//图表边框颜色
                            borderWidth: 2//图表边框宽度
                        },
                        label: {
                            show: true,//标签是否显示
                            formatter: '{d}%',//标签格式化
                            fontSize: 12,//标签字体大小
                            color: '#666',//标签字体颜色
                            position: 'outside',//标签位置
                            alignTo: 'edge',//标签对齐方式
                            edgeDistance: '10%',//标签距离边缘的距离
                            distanceToLabelLine: 5//标签距离标签线的距离
                        },
                        labelLine: {
                            show: true,//标签线是否显示 
                            length: 15,//标签线长度
                            length2: 10,//标签线长度2
                            smooth: true//标签线是否平滑
                        },
                        data: [//数据
                            { value: 18200, name: '电器', itemStyle: { color: '#3B82F6' } },
                            { value: 17000, name: '服饰鞋类', itemStyle: { color: '#FBBF24' } },
                            { value: 17020, name: '生活用品', itemStyle: { color: '#10B981' } },
                            { value: 18000, name: '美妆护肤', itemStyle: { color: '#F87171' } },
                            { value: 15000, name: '食品', itemStyle: { color: '#3B82F6' } }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,//阴影模糊
                                shadowOffsetX: 0,//阴影偏移X
                                shadowColor: 'rgba(0, 0, 0, 0.2)'//阴影颜色
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }
    });
};

// 初始化利润占比折线图
const initProfitChart = () => {
    nextTick(() => {
        const chartDom = document.getElementById('profit-chart');
        if (chartDom) {
            const myChart = echarts.init(chartDom);
            const colors = ['#5470C6', '#EE6666'];
            const option = {

                tooltip: {
                    trigger: 'axis'//提示框类型
                },
                legend: {
                    data: ['销售额', '利润']//图例数据
                },
                grid: {
                    left: '3%',//网格左侧位置
                    right: '4%',//网格右侧位置
                    bottom: '3%',//网格底部位置
                    containLabel: true//是否包含标签
                },
                xAxis: {
                    type: 'category',//x轴类型
                    boundaryGap: false,//是否包含标签
                    data: ['01', '02', '03', '04', '05', '06', '07']//x轴数据
                },
                yAxis: {
                    type: 'value',//y轴类型
                    // name: '单位/元',//y轴名称
                    nameTextStyle: {
                        align: 'right',//设置名称对齐方式
                        color: '#86909C', // 设置颜色为红色
                        fontSize: 12 // 可选，设置字体大小
                    },
                },
                series: [
                    {
                        name: '销售额',
                        type: 'line',
                        stack: 'Total',//堆叠
                        smooth: true, // 启用平滑
                        smoothMonotone: 'x', // 可选：保持单调性（避免过度弯曲）
                        data: [720, 432, 101, 134, 90, 970, 210]//数据
                    },
                    {
                        name: '利润',
                        type: 'line',
                        stack: 'Total',//堆叠
                        smooth: true, // 启用平滑
                        smoothMonotone: 'x',// 可选：保持单调性（避免过度弯曲）
                        data: [220, 382, 191, 234, 290, 330, 310]//数据
                    },

                ]
            }
            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }
    })
}


const modules = [Autoplay, Mousewheel];
let userName = ref("");
// 初始化标题，拿到用户的信息
const initTitle = () => {
   
   const userInfo = JSON.parse(localStorage.getItem("userInfo") || '{}');
   if (userInfo) {
      userName.value = userInfo.nickname;
   }
}
onMounted(() => {
    initTitle();
    initSalesChart();
    initCompletionRateChart();
    initProductCategoryChart();
    initProfitChart();
    // initSupplierRankingChart();
    // initPurchaseCategoryChart();

    // 添加页面载入动画
    document.querySelector('.platform-home')?.classList.add('page-loaded');
});
</script>

<style scoped lang="scss">
.platform-home {
    width: 100%;
    height: 100%;
    // border: 1px solid red;
    font-family: 黑体;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;

    &.page-loaded {
        opacity: 1;
        transform: translateY(0);
    }

    &_header {
        &_right {
            color: #a1a1a1;
        }
    }

    &_content {
        width: 100%;
        height: 100%;
        border: 1px solid blue;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 14px;
    margin: 0 auto;
    // max-width: 1600px;
}

.dashboard-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    padding: 14px 20px 14px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 90px;
    transition: box-shadow 0.2s;
    position: relative;
    opacity: 0;
    transform: translateY(20px);

    &:hover {
        box-shadow: 0 8px 28px 0 rgba(64, 158, 255, 0.15);
        transform: translateY(-3px);
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-title {
    font-size: 15px;
    color: #666;
    font-weight: 500;
}

.card-icon {
    position: absolute;
    right: 14px;
    top: 20px;
    width: 74px;
    height: 74px;
    background: #f5f6fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-placeholder {
        width: 44px;
        height: 44px;
        background: #d3d6e4;
        border-radius: 50%;
        display: inline-block;
    }
}

.card-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.card-value {
    font-size: 2rem;
    font-weight: bold;
    color: #222;
}

.card-change {
    font-size: 1rem;
    margin-left: 6px;

    &.up {
        color: #1ecb8c;
    }

    &.down {
        color: #f56c6c;
    }
}

.platform-home-content-center {
    width: 100%;
    height: 290px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;

    .platform-home-content-center-left {
        width: 80%;
        height: 100%;
        // border: 1px solid blue;
    }

    .platform-home-content-center-right {
        width: 30%;
        // height: 100%;
        // border: 1px solid green;
        display: flex;
        flex-direction: column;
    }
}

.platform-home-content-bottom {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: flex-start;
    gap: 16px;

    .platform-home-content-bottom-item {
        width: 20%;
        height: 100%;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
        border: 1px solid #f0f0f0;
        padding: 16px;
    }

    .platform-home-content-bottom-item2 {
        width: 60%;
        height: 100%;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
        border: 1px solid #f0f0f0;
        padding: 16px;
    }
}

.platform-home-content-bottom-item1 {
    width: 20%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: 16px;

}

.sales-bar-chart {
    width: 100%;
    // height: 240px;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    margin-top: 0;
    padding: 0;
}

// 待办事项面板样式
.todo-panel {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}

.todo-header {
    padding: 0;
    border-bottom: 1px solid #f0f0f0;
}

.sales-ranking-header {
    padding: 0 0 10px 0;
}

.sales-ranking-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
}

.sales-ranking-columns {
    display: grid;
    grid-template-columns: 80px 100px 100px;
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    white-space: nowrap;
}

.column-name {
    text-align: left;
    padding-left: 30px;
}

.column-sales,
.column-repayment {
    text-align: center;
}

.todo-content {
    flex: 1;
    overflow: hidden;
}

.todo-swiper {
    height: 214px;
    width: 100%;
}

.todo-item {
    width: 100%;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    height: auto !important;

    &:last-child {
        border-bottom: none;
    }

    &:hover {
        background-color: #f5f8ff;
    }
}

.ranking-item {
    display: grid !important;
    grid-template-columns: 80px 100px 100px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
    height: 40px !important;

    &:last-child {
        border-bottom: none !important;
    }

    &:hover {
        background-color: #f5f8ff !important;
    }
}

.ranking-left {
    display: flex;
    align-items: center;
    width: 100%;
}

.ranking-right {
    display: contents;
}

.rank-number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    margin-right: 6px;
    color: #fff;
    flex-shrink: 0;
}

.rank-1 {
    background-color: #FFC107;
}

.rank-2 {
    background-color: #2196F3;
}

.rank-3 {
    background-color: #4CAF50;
}

.rank-4,
.rank-5,
.rank-6,
.rank-7 {
    background-color: #BDBDBD;
}

.rank-name {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: visible;
}

.sales-amount,
.repayment-amount {
    text-align: center;
    font-size: 12px;
    color: #000;
}

// 图表卡片样式
.chart-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // transition: all 0.3s ease;

    &:hover {
        box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.08);
    }
}

.chart-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    margin-top: 12px;
}

.chart-container {
    flex: 1;
    width: 100%;
    height: 160px;
}

.chart-container1 {
    flex: 1;
    width: 100%;
    height: 300px;
}

.chart-info-item {
    text-align: center;
    padding: 20px;
}

.info-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.info-value {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

// 图例样式
.chart-legend-box {
    padding: 20px 0 0 0;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: space-between;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-right: 8px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;

}

.legend-label {
    color: #666;
    margin-right: 6px;
}

.legend-value {
    color: #333;
    font-weight: 500;
}

// 动画效果
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

// 应用动画
.animate-in {
    animation: fadeInUp 0.6s forwards;

    &:nth-child(1) {
        animation-delay: 0.1s;
    }

    &:nth-child(2) {
        animation-delay: 0.2s;
    }

    &:nth-child(3) {
        animation-delay: 0.3s;
    }

    &:nth-child(4) {
        animation-delay: 0.4s;
    }

    &:nth-child(5) {
        animation-delay: 0.5s;
    }

    &:nth-child(6) {
        animation-delay: 0.6s;
    }

    &:nth-child(7) {
        animation-delay: 0.7s;
    }

    &:nth-child(8) {
        animation-delay: 0.8s;
    }

    &:nth-child(9) {
        animation-delay: 0.9s;
    }

    &:nth-child(10) {
        animation-delay: 1s;
    }
}

.ranking-content {
    height: 280px;
    overflow: hidden;
}

.ranking-swiper {
    height: 280px;
    width: 100%;
}

/* 修正媒体查询 - 只在真正全屏时才放大元素 */
@media screen and (min-height: 1080px) and (min-width: 1920px) {
    .platform-home-content-top {
        margin-bottom: 25px;

        .dashboard-grid {
            grid-gap: 18px;
        }

        .dashboard-card {
            min-height: 110px;
            padding: 18px 24px;

            .card-title {
                font-size: 16px;
            }

            .card-value {
                font-size: 2.2rem;
            }

            .card-icon {
                width: 80px;
                height: 80px;

                .icon-placeholder {
                    width: 48px;
                    height: 48px;
                }
            }
        }
    }

    .platform-home-content-center {
        height: 340px;
        margin-bottom: 35px;

        .platform-home-content-bottom-item1 {
            padding: 20px;

            .chart-title {
                font-size: 17px;
                margin-bottom: 15px;
            }

            #completion-rate-chart {
                height: 180px !important;
            }

            .chart-info-item {
                padding: 25px 20px;

                .info-value {
                    font-size: 20px;
                }
            }
        }
    }

    .platform-home-content-bottom {
        height: 380px;
        gap: 18px;

        .platform-home-content-bottom-item {
            padding: 20px;

            .chart-title {
                font-size: 17px;
                margin-bottom: 15px;
            }

            .chart-container {
                height: 180px;
            }

            .ranking-content {
                height: 320px;
            }

            .ranking-swiper {
                height: 320px;
            }

            .ranking-item {
                height: 45px !important;

                .rank-number {
                    width: 32px;
                    height: 32px;
                }

                .rank-name {
                    font-size: 15px;
                }

                .sales-amount,
                .repayment-amount {
                    font-size: 13px;
                }
            }
        }

        .platform-home-content-bottom-item2 {
            padding: 20px;

            .chart-title {
                font-size: 17px;
                margin-bottom: 15px;
            }

            .chart-container1 {
                height: 320px;
            }
        }
    }
}

/* 4K及以上超高分辨率适配 */
@media screen and (min-height: 1440px) and (min-width: 2560px) {
    .platform-home-content-center {
        height: 400px;

        .platform-home-content-bottom-item1 {
            #completion-rate-chart {
                height: 220px !important;
            }
        }
    }

    .platform-home-content-bottom {
        height: 450px;

        .platform-home-content-bottom-item {
            .chart-container {
                height: 220px;
            }

            .ranking-content,
            .ranking-swiper {
                height: 380px;
            }
        }

        .platform-home-content-bottom-item2 {
            .chart-container1 {
                height: 380px;
            }
        }
    }
}
</style>